<template>
    <div class="page">
        <div class="header">
            <van-row class="tittle" justify="center">
                <van-col>个人记账本</van-col>
            </van-row>
            <div class="headerRow1">
                <van-row class="headerRow1Col1" justify="center">
                    <van-col class="headerRow1Col1Content1">本月支出</van-col>
                    <van-col class="headerRow1Col1Content2">￥</van-col>
                    <van-col class="headerRow1Col1Content3">{{ formattedSpending }}</van-col>
                </van-row>
                <van-row class="headerRow1Col2" justify="center">
                    <i class="iconfont icon-bg-circular" style="font-size: 50px;" @click="navigateToAnalysis"></i>
                </van-row>
            </div>
            <div class="headerRow2">
                <van-row class="headerRow2Col1" justify="center">
                    <van-col class="headerRow2Col1Content1">本月收入</van-col>
                    <van-col class="headerRow2Col1Content2">￥</van-col>
                    <van-col class="headerRow2Col1Content3">{{ formattedIncome }}</van-col>
                </van-row>
                <van-row class="headerRow2Col2" justify="center">
                    <van-col class="headerRow2Col2Content1">月结余</van-col>
                    <van-col class="headerRow2Col2Content2">￥</van-col>
                    <van-col class="headerRow2Col2Content3">{{ formattedBalances }}</van-col>
                </van-row>
            </div>
        </div>
        <div class="list">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="listRow1">
                    <van-row class="listRow1Col1" justify="center">
                        <van-col class="listRow1Col1Content1">近3日账单</van-col>
                    </van-row>
                    <van-row class="listRow1Col2" justify="center">
                        <van-col class="listRow1Col1Content1">查看账单 ></van-col>
                    </van-row>
                </div>
                <van-cell class="listCell" v-for="(item, index) in list.slice(0, 3)" :key="index">
                    <div class="listCellRow1">
                        <van-row class="listCellRow1Col1" justify="center">
                            <van-col class="listCellRow1Col1Content1">{{ item.content.day }}</van-col>
                        </van-row>
                        <van-row class="listCellRow1Col2" justify="center">
                            <van-col class="listCellRow1Col2Content1">支出：</van-col>
                            <van-col class="listCellRow1Col2Content1">{{ item.content.spent }}</van-col>
                        </van-row>
                    </div>
                    <div class="van-hairline--top"></div>
                    <div class="listCellRow2" v-for="(detail, index) in Object.values(item.content.detail)" :key="index"
                        justify="center">
                        <van-row class="listCellRow2Col1" justify="center">
                            <i :class="`iconfont ${detail.icon}`" style="font-size: 30px;"></i>
                            <van-col class="listCellRow2Col1Content1">{{ detail.tittle }}</van-col>
                        </van-row>
                        <van-row class="listCellRow2Col2" justify="center">
                            <van-col class="listCellRow2Col2Content1">{{ detail.spent }}</van-col>
                        </van-row>
                    </div>
                </van-cell>
            </van-list>
        </div>
    </div>
    <van-row>
        <HomeMenu />
    </van-row>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import HomeMenu from '@/components/layout/HomeMenu.vue'
import { useRouter } from 'vue-router';

const router = useRouter();

const navigateToAnalysis = () => {
    router.push('/Home/Analysis');
};

const Spending = ref(1200);
const Income = ref(3000);
const Balances = ref(Income.value - Spending.value)

const formattedSpending = computed(() => Spending.value.toFixed(2));
const formattedIncome = computed(() => Income.value.toFixed(2));
const formattedBalances = computed(() => Balances.value.toFixed(2));

const now = new Date();
const month = now.getMonth();
const day = now.getDate();

const list = ref([
    {
        id: 1, content: {
            day: `${month}月${day}号`,
            spent: 114514,
            detail: {
                project1: { tittle: "购物-日常用品", icon: "icon-gouwucheman", spent: -100 },
                project2: { tittle: "餐饮-三餐", icon: "icon-canyin", spent: 100 },
            }
        }
    },
    {
        id: 2, content: {
            day: `${month}月${day}号`,
            spent: 114515,
            detail: {
                project1: { tittle: "购物-日常用品", icon: "icon-gouwucheman", spent: -100 },
                project2: { tittle: "交通-公交", icon: "icon-bus-alt", spent: -100 },
            }
        }
    },
    {
        id: 3, content: {
            day: `${month}月${day}号`,
            spent: 114516,
            detail: {
                project1: { tittle: "购物-日常用品", icon: "icon-gouwucheman", spent: -100 },
                project2: { tittle: "餐饮-三餐", icon: "icon-canyin", spent: 100 },
            }
        }
    },
    {
        id: 4, content: {
            day: `${month}月${day}号`,
            spent: 114517,
            detail: {
                project1: { tittle: "购物-日常用品", icon: "icon-gouwucheman", spent: 100 },
                project2: { tittle: "餐饮-三餐", icon: "icon-canyin", spent: 100 },
            }
        }
    },
]);

const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (list.value.length >= 3) {
            finished.value = true;
        }
    }, 1000);
};
</script>

<style scoped src="@/static/Home/index.scss" />